<template>
    <view class="hb-toptips" :class="[isShow?'toptips-show':'toptips-hide',isStatus?'status':'',isTransparent?'transparent':'',isTransparentH5?'transparentH5':'']">
        <view class="hb-toptips__content justify-center align-center" :class="['hb-toptips__content--'+tips.bgColor]">
            <text :class="['hb-icon_'+tips.icon]"></text>
            <text>{{tips.message}}</text>
        </view>
    </view>
</template>

<script>
    let _toptips = null
    export default {
        name: 'hb-toptips',
        data() {
            return {
                CustomBar: this.CustomBar,
                tips: {},
                isTransparent: false,
                isTransparentH5: false,
                isStatus: false,
                isShow: false,
                duration: 1500
            }
        },
        mounted() {
            this.$emit('complete');
        },
        methods: {
            /**
             * 隐藏
             */
            hide() {
                this.tips = {}
                this.isShow = false;
                if (_toptips) {
                    clearTimeout(_toptips.timeout)
                    _toptips = null
                }
            },
            /**
             * 显示
             */
            show(opts = {}) {
                if (typeof(opts) === "string") {
                    console.log('hb-toptips:组件方法调用错误,请检查参数')
                }
                const closePromise = new Promise((resolve) => {
                    const callback = () => {
                        this.hide()
                        return resolve(true)
                    }
                    if (_toptips) {
                        clearTimeout(_toptips.timeout)
                        _toptips = null
                    }

                    _toptips = {
                        hide: this.hide,
                    }
                    this.isShow = true
                    this.tips = opts;
                    this.checkTitleNView();

                    _toptips.timeout = setTimeout(callback, opts.duration || this.duration)
                })
                const result = () => {
                    if (_toptips) {
                        _toptips.hide.call(this)
                    }
                }

                result.then = (resolve, reject) => closePromise.then(resolve, reject)
                result.promise = closePromise

                return result
            },
            success(opts = {}) {
                return this.show(Object.assign({
                    icon: 'roundsuccessfill',
                    bgColor: 'sucess'
                }, opts))
            },
            info(opts = {}) {
                return this.show(Object.assign({
                    icon: 'prompt-fill',
                    bgColor: 'info'
                }, opts))
            },
            warn(opts = {}) {
                return this.show(Object.assign({
                    icon: 'prompt-fill',
                    bgColor: 'warn'
                }, opts))
            },
            error(opts = {}) {
                return this.show(Object.assign({
                    icon: 'roundclose',
                    bgColor: 'error'
                }, opts))
            },
            checkTitleNView() {
                //#ifdef APP-PLUS
                var titleNView = plus.webview.getTopWebview().getStyle().titleNView;
                if (!titleNView.type) {
                    this.isStatus = true;
                } else if (titleNView.type == 'transparent') {
                    this.isStatus = true;
                    uni.createSelectorQuery().selectViewport().scrollOffset(res => {
                        if (res.scrollTop > 0) {
                            this.isTransparent = true
                        } else {
                            this.isStatus = true;
                            this.isTransparent = false;
                        }
                    }).exec();
                } else {}
                //#endif
                //#ifdef H5
                var headDOM = document.getElementsByClassName("uni-page-head");
                if (headDOM.length > 0) {
                    console.log('show isTransparent');
                    if (headDOM[0].className.indexOf('transparent') > -1) {
                        uni.createSelectorQuery().selectViewport().scrollOffset(res => {
                            if (res.scrollTop > 0) {
                                this.isTransparentH5 = true;
                            } else {
                                this.isTransparentH5 = false;
                            }
                        }).exec();
                    } else {
                        this.isTransparentH5 = true;
                    }

                } else {}
                //#endif
            },
        }
    }
</script>
